<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Register Form</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("base-widget-desktop");</script>
		<script type="text/javascript">
			var user = {};
			
			dorado.onInit(function() {
				new dorado.widget.FormProfile({
					id: "defaultFormProfile",	// id为defaultFormProfile的FormProfile会被其他AutoForm和FormElement自动的引用
					width: 600,
					labelWidth: 160,
					renderHintMessage: true,
					hintWidth: 300
				});
				
				new dorado.widget.AutoForm({
					id: "autoform",
					renderTo: document.body,
					entity: user,
					cols: "*",
					elements: [ {
						property: "userName",
						label: "用户名",
						editor: { $type: "TextEditor", required: true,
							blankText: "请输入5个字符以上的用户名",
							validators: [{
								$type: "Length",
								minLength: 5
							}] 
						}
					}, {
						property: "nickName",
						label: "昵称",
						editor: { $type: "TextEditor", required: true }
					}, {
						property: "password",
						label: "口令",
						editor: { $type: "TextEditor", password: true, required: true,
							onTextEdit: function(editorPassword2) {
								editorPassword2.set("value", "");
							}
						}
					}, {
						id: "editorPassword2",
						property: "password2",
						label: "确认口令",
						editor: { $type: "TextEditor", password: true, required: true,
							beforePost: function(self) {
								if (self.get("value") != user.password) {
									self.set("value", "");
									throw new dorado.Exception("您两次输入的口令不一致。");
								}
							}
						}
					}, {
						property: "sex",
						label: "性别",
						editor: { $type: "RadioGroup", layout: "flow", radioButtons: [
								{ value: true, text: "男" },
								{ value: false, text: "女" }
							],
						}
					}, {
						property: "brithday",
						label: "生日",
						editor: { $type: "TextEditor", dataType: "Date", trigger: "defaultDateDropDown" }
					}, {
						property: "occupation",
						label: "职业",
						editor: {
							$type: "TextEditor",
							trigger: {
								$type: "ListDropDown",
								autoOpen: true,
								items: ["学生", "IT", "金融", "医疗卫生", "餐饮", "其他"]
							}
						}
					}, {
						property: "timeZone",
						label: "时区",
						editor: { $type: "CustomSpinner", pattern: "GMT:[-12,12|2]" }
					}, {
						property: "email",
						label: "EMail",
						editor: {
							$type: "TextEditor", blankText: "abc@abc.abc",
							validators: [{
								$type: "RegExp",
								whiteRegExp: "\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*",
								resultMessage: "输入的内容不是正确的EMail格式。"
							}]
						}
					}, {
						property: "receivePromotional",
						type: "checkBox",
						label: "接收促销邮件"
					}, {
						property: "signature",
						label: "个性签名",
						renderHintMessage: false,
						hintWidth: 150,
						editor: {
							$type: "TextArea",
							height: 80
						}
					}, {
						showLabel: false,
						showHint: false,
						editor: {
							$type: "Container",
							height: 30,
							layout: "Anchor",
							children: [{
								$type: "Button",
								layoutConstraint: { top: 2 },
								caption: "提交",
								width: 70,
								onClick: function(autoform) {
									var msg = "";
									if (autoform.validate()) {
										msg = "提交的表单数据：\n";
										for (var p in user) {
											msg += p + " = " + user[p] + "\n";
										}
									} else {
										msg = "此表单尚未通过校验!";
									}
									dorado.MessageBox.alert(msg);
								}
							}, {
								$type: "Button",
								layoutConstraint: { anchorLeft: "previous", left: 2, top: 2 },
								caption: "重置",
								onClick: function(autoform) {
									user = {};
									autoform.set("entity", user);
								}
							}]
						}
					}]
				});
			});
		</script>
	</head>
	<body style="height: 100%"></body>
</html>
